<template>
    <view class="page">
        <view class="my-user">
            <view class="message" @tap="to_message">
                <image src="/static/icon_11.png" class="seting-img" mode="" />
                <view class="tip font-16" v-if="user_message_count > 0">{{ user_message_count }}</view>
            </view>
            <image src="/static/icon_12.svg" class="seting-img seting" mode="" @tap="to_setting" />
            <view class="user">
                <view class="user-adv">
                    <image :src="users.head_pic || '/static/user.svg'" mode="" @tap="go_login" />
                    <view class="font-26">
                        <view>
                            <view v-if="users.nickname || users.mobile" class="inline ellipsis" style="max-width:250rpx" @tap="go_login">{{ users.nickname || users.mobile }}</view>
                            <view v-else class="inline ellipsis" style="max-width:250rpx" @tap="go_login">未登录</view>
                            <!-- #ifdef APP-PLUS -->
                            <view v-if="users.level_name" class="vip font-22 inline">{{ users.level_name }}</view>
                            <!-- #endif -->
                            <!--<view v-if="users.identity_name" class="vip font-22 inline">{{users.identity_name}}认证</view>-->
                        </view>
                        <view v-if="users.user_id">ID：{{ users.user_id }}</view>
                        <!--<view v-if="users.level != 1 && users.level_name" class="invite">-->
                        <!--推荐码：{{users.encipher}}-->
                        <!--<image src="/static/copy_icon_w.png" mode="" @tap="$copy(users.encipher)" />-->
                        <!--</view>-->
                    </view>
                </view>
                <view class=""><view class="button-jump" @click="changeVersion">国际版</view></view>
            </view>
            <view class="user-msg">
                <view @tap="to_pay_detail">
                    <view class="font-34 bold">
                        <text v-if="users.total_amount" style="margin-right: 20rpx;">HKD</text>
                        {{ users.total_amount || '-' }}
                    </view>
                    <view class="font-22">我的消費</view>
                </view>
            </view>
        </view>

        <view class="order">
            <view class="my-order" @tap="to_order">
                <view class="font-30">我的訂單</view>
                <view class="font-26">全部訂單</view>
            </view>
            <view class="order-option">
                <view @tap="to_order_item('WAITPAY')">
                    <image src="/static/padding_pay.png" class="image-44" mode="" />
                    <view class="font-24">待付款</view>
                    <view class="tip font-20" v-if="users.waitPay > 0">{{ users.waitPay }}</view>
                </view>
                <view @tap="to_order_item('WAITSEND')">
                    <image src="/static/padding_ship.png" class="image-44" mode="" />
                    <view class="font-24">待發貨</view>
                    <view class="tip font-20" v-if="users.waitSend > 0">{{ users.waitSend }}</view>
                </view>
                <view @tap="to_order_item('WAITRECEIVE')">
                    <image src="/static/padding_card.png" class="image-44" mode="" />
                    <view class="font-24">待收貨</view>
                    <view class="tip font-20" v-if="users.waitReceive > 0">{{ users.waitReceive }}</view>
                </view>
                <view @tap="to_order_item('WAITCCOMMENT')">
                    <image src="/static/padding_evaluation.png" class="image-44" mode="" />
                    <view class="font-24">待評價</view>
                    <!-- <view class="tip font-22" v-if="users.return_count>0">{{users.return_count}}</view> -->
                </view>
                <view>
                    <image src="/static/after_sale.png" class="image-44" mode="" @tap="to_sale" />
                    <view class="font-24">退款/售後</view>
                    <view class="tip font-20" v-if="users.return_count > 0">{{ users.return_count }}</view>
                </view>
            </view>
        </view>

        <view class="wallet" style="margin-top: 20rpx;" v-if="operator">
            <view class="my-wallet" @tap="to_operate">
                <view class="font-30">所屬運營中心</view>
                <view class="font-26"></view>
            </view>
            <view class="wallt-msg">
                <view class="msg-item">
                    <view class="wallet-small">
                        <image src="/static/center_name.png"></image>
                        <view class="font-24">{{ operator.operator_title }}</view>
                        <!-- <view class="font-30">{{users.into_commission}}</view> -->
                    </view>
                    <view class="wallet-small">
                        <image src="/static/center_peo.png"></image>
                        <view class="font-24 address-txt">{{ operator.service_address }}</view>
                        <!-- <view class="font-30">{{users.agent}}</view> -->
                    </view>
                    <view class="right wallet-small">
                        <image src="/static/center_phone.png"></image>
                        <view class="font-24">{{ operator.service_phone }}</view>
                        <!-- <view class="font-30">{{users.profit}}</view> -->
                    </view>
                </view>
            </view>
        </view>
        <view class="service">
            <view class="my-service"><view class="font-30">常用服務</view></view>
            <view class="service-content">
                <view @tap="to_address">
                    <image src="/static/icon_7.png" mode="" />
                    <view class="font-24">地址管理</view>
                </view>
            </view>
        </view>
        <foot></foot>
        <!-- <server-img v-model="server_img"></server-img>
        <bind-account v-model="show_bind" :set_mobel="set_mobel"></bind-account>
        <no-permission :title="title" :message="message" :botton="botton" v-model="permission_dialog" @change="permission_change"></no-permission>
        <no-conditions v-model="conditions.dialog" :conditions="conditions" @change="conditions_change" :ok="is_ok"></no-conditions> -->
    </view>
</template>

<script>
import my from './my'
// import bindAccount from 'index/components/bind_account.vue'
// import noPermission from 'components/no_permission.vue'
// import noConditions from 'components/no_conditions.vue'
// import displacePopup from '@/components/displace_popup/displace_popup.vue'
import foot from '@/components/foot.vue'
export default {
    data() {
        return {
            operator: {},
            users: {
                p_name: {}
            },
            user_message_count: 0,
            server_img: false,
            show_bind: false,
            set_mobel: false,
            permission_dialog: false,
            title: '',
            message: '',
            botton: '',
            conditions: {
                title: '',
                message: '',
                botton: '',
                dialog: false
            },
            good_id: '',
            is_ok: false
        }
    },
    onShow() {
        this.show()
    },
    onPullDownRefresh() {
        this.show()
        setTimeout(() => {
            uni.stopPullDownRefresh()
            uni.showToast({
                title: '刷新成功',
                icon: 'none'
            })
        }, 1000)
    },
    methods: {
        changeVersion() {
            const user_id = uni.getStorageSync('__user_id') || ''
            const href = `https://app.jingziy.cn/h5-new/#/pages/my?user_id=${user_id}`
            // const href = `http://localhost:8889/h5-new/#/pages/my?user_id=${user_id}`
            // const href = `http://192.168.2.105:8889/h5-new/#/pages/my?user_id=${user_id}`
            console.log('user_id', user_id, href)
            // alert(href)
            // location.href = href
            location.replace(href)
        },
        show() {
            this.$http('get|api/User/index').then(res => {
                this.users = res.result.users
                this.operator = res.result.operator
                // console.log('----------------------------', res)
                uni.setStorageSync('level', res.result.users.level)
                this.user_message_count = res.result.user_message_count
                if (/http/.test(this.users.head_pic)) {
                    //
                } else {
                    if (this.users.head_pic) {
                        this.users.head_pic = this.$image + this.users.head_pic
                    }
                }
                this.$store.dispatch('set_user', this.users)
                uni.setStorageSync('setinvite', res.result.users.encipher)
                uni.setStorageSync('level', res.result.users.level)
            })
        },
        ...my,
        to_sign() {
            let str = ''
            let data = new Date()
            str = `${data.getFullYear()}-${data.getMonth() + 1}-${data.getDate()}`
            this.$http('post|api/User/sign', {
                str
            }).then(res => {
                this.$toastApp(res.msg)
                setTimeout(() => {
                    this.users.is_sign = 1
                }, 1000)
            })
        },
        permission_change() {
            if (this.botton === '去实名') {
                uni.navigateTo({
                    url: '/my/shiming/shiming'
                })
                return
            }
            this.title = ''
            this.message = ''
            this.botton = ''
            uni.navigateTo({
                url: `/index/good_detail/good_detail?id=${this.good_id}`
            })
        },
        conditions_change() {
            this.$http('get|api/User/apply_level')
                .then(res => {
                    this.$http('get|api/User/index').then(res => {
                        this.users = res.result.users
                    })
                    this.$toastApp(res.msg)
                    this.conditions = {
                        title: '',
                        message: '',
                        botton: '',
                        dialog: false
                    }
                })
                .catch(e => {
                    this.$toastApp(e.msg)
                    // console.log(e);
                })
        },
        go_login() {
            if (!this.users.nickname) {
                uni.navigateTo({
                    url: '/pages/login'
                })
            }
        }
    },
    components: {
        // bindAccount,
        // noPermission,
        // noConditions,
        // displacePopup,
        foot
    }
}
</script>

<style lang="scss">
page {
    background-color: #f7f7f7;
}

.page {
    background-color: #f7f7f7;
    min-height: calc(100vh - 100rpx);
    padding-bottom: 20rpx;
    box-sizing: border-box;
}
.button-jump {
    color: #ffffff;
    background-color: #4e6ef3;
    font-size: 24rpx;
    padding: 10rpx;
    border-radius: 8rpx;
}
.foot {
    font-size: 26rpx;
    text-align: center;
    padding: 30rpx;
    background-color: #f7f7f7;
    color: #999999;
}

.my-user {
    height: 478rpx;
    width: 100%;
    /* #ifndef H5 */
    background-image: url(../static/user_bg.png);
    /* #endif */
    /* #ifdef H5 */
    background-image: url(../static/h5_user_bg.png);
    /* #endif */
    background-size: 100% 100%;
    padding: 0 30rpx;
    padding-top: 90rpx;
    box-sizing: border-box;

    .message {
        position: absolute;
        right: 100rpx;
        top: 30rpx;

        .tip {
            position: absolute;
            height: 36rpx;
            width: 36rpx;
            background-color: #f4293f;
            border-radius: 50%;
            text-align: center;
            line-height: 36rpx;
            color: #ffffff;
            right: -16rpx;
            top: -16rpx;
        }
    }

    .seting-img {
        height: 40rpx;
        width: 40rpx;
    }

    .seting {
        position: absolute;
        right: 30rpx;
        top: 30rpx;
    }

    .user {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .sign {
            height: 90rpx;
            width: 90rpx;
        }

        .user-adv {
            display: flex;
            justify-content: space-between;
            align-items: center;

            image {
                height: 120rpx;
                width: 120rpx;
                border-radius: 50%;
            }

            > view {
                padding-left: 20rpx;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 120rpx;
                color: #ffffff;

                .vip {
                    min-width: 120rpx;
                    height: 36rpx;
                    background: #ffc700;
                    border-radius: 20rpx;
                    text-align: center;
                    line-height: 36rpx;
                    margin-left: 20rpx;
                    color: var(--theme);
                    // vertical-align: bottom;
                    padding: 0 10rpx;
                }
            }
        }
    }

    .user-msg {
        margin-top: 50rpx;
        text-align: center;
        display: flex;

        > view {
            flex: 1;
            color: #ffffff;
        }
    }
}

.wallet {
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    width: 710rpx;
    margin: 0 auto;
    margin-top: -110rpx;
    background-color: #ffffff;
    position: relative;

    .my-wallet {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 20rpx;

        .font-26 {
            color: #b0b0b0;
            padding-right: 34rpx;
            position: relative;
        }

        .font-26::after {
            position: absolute;
            content: '';
            right: 0;
            top: 50%;
            margin-top: -12rpx;
            height: 28rpx;
            width: 28rpx;
            background-image: url();
            background-size: 100%;
        }
    }

    .juker {
        .msg-item {
            padding-bottom: 20rpx;
            margin-bottom: 50rpx;
        }

        .msg-item:last-child {
            margin-bottom: 0;
        }
    }

    .wallt-msg {
        margin-top: 50rpx;

        .msg-item {
            display: flex;
            // height: 100rpx;
            text-align: center;
            // margin-bottom: 50rpx;
            position: relative;

            .msg-item-tips {
                position: absolute;
                top: -40rpx;
            }

            > view {
                flex: 1;
            }

            .font-24 {
                color: #b3b3b3;
            }

            .font-30 {
                color: #f75348;
                font-weight: bold;
            }

            .right {
                padding-left: 30rpx;
                box-sizing: border-box;
            }

            &:not(:last-child)::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: #eee;
                transform: scaleY(0.5);
                height: 1px;
            }
        }
    }

    .wallt-msg::after {
        position: absolute;
        width: 650rpx;
        height: 2rpx;
        // background: rgba(242, 242, 242, 1);
        transform: scaleY(0.5);
        content: '';
        left: 50%;
        margin-left: -325rpx;
        top: 240rpx;
    }

    // .wallt-msg::before {
    //     position: absolute;
    //     width: 2rpx;
    //     height: 200rpx;
    //     background: rgba(242, 242, 242, 1);
    //     content: '';
    //     transform: scaleX(0.5);
    //     left: 50%;
    //     top: 50%;
    //     margin-top: -66rpx;
    // }
}

.order {
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    width: 710rpx;
    margin: 0 auto;
    background-color: #ffffff;
    /* #ifdef APP-PLUS */
    margin-top: 20rpx;
    /* #endif */
    /* #ifdef H5 */
    margin-top: -100rpx;
    /* #endif */

    .my-order {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 20rpx;

        .font-26 {
            color: #b0b0b0;
            padding-right: 34rpx;
            position: relative;
        }

        .font-26::after {
            position: absolute;
            content: '';
            right: 0;
            top: 50%;
            margin-top: -12rpx;
            height: 28rpx;
            width: 28rpx;
            background-image: url(../static/more.png);
            background-size: 100%;
        }
    }

    .order-option {
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-top: 28rpx;

        > view {
            position: relative;

            .tip {
                position: absolute;
                width: 36rpx;
                height: 36rpx;
                background: rgba(255, 79, 98, 1);
                border-radius: 50%;
                color: #ffffff;
                line-height: 36rpx;
                right: -4rpx;
                top: -13rpx;
            }
        }
    }
}

.service {
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    width: 710rpx;
    margin: 0 auto;
    background-color: #ffffff;
    margin-top: 20rpx;

    .my-service {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        line-height: 90rpx;
    }

    .service-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: 30rpx;
        box-sizing: border-box;

        > view {
            width: 25%;
            display: flex;
            margin-top: 30rpx;
            flex-flow: column;
            align-items: center;
            justify-content: center;
        }

        image {
            height: 60rpx;
            width: 60rpx;
            margin-bottom: 10rpx;
        }

        .font-24 {
            color: #666666;
        }
    }
}

.invite {
    image {
        height: 32rpx !important;
        width: 32rpx !important;
        vertical-align: sub;
        margin-left: 10rpx;
    }
}

.wallet-small {
    image {
        width: 48rpx;
        height: 48rpx;
    }

    .address-txt {
        width: 230rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>
